<template>
  <div class="body vertical center " :style="{ height: appHeight-100 + 'px' }">
    <!-- 充值列表选择 -->
    <div
      :class="`flex space_between item_list ${item.status === 0 ? 'wh_item' : ''} ${curDepositWay._payname === item._payname ? 'active' : ''}`"
      v-for="(item, index) in usdtRecharge" :key="index">
      <div v-if="item.status === 0" class="bank_wh">
        <iconpark-icon icon-id="fix" size="1rem"></iconpark-icon>
        <span>{{ t('addBank_page_bankPay_wh') }}</span>
      </div>
      <div class="item_list_l">
        <div class="bank_icon">
          <ImgT :src="`/imgs/payment/icon/icon_${item._payname}.webp`" />
        </div>
        <div class="bank-txt">
          <div class="bank_name">
            <span class="bank_payName">{{ t(`api_${item._payname}`) }}</span>
            <a class="wh-icon" @click="onCloseSm(item)">
              <iconpark-icon icon-id="Frame" size=".875rem"></iconpark-icon>
            </a>
          </div>
          <div class="bank_limit">
            <template v-if="['usdt'].includes(item._payname?.toLowerCase())">
              {{ verifyNumberComma(String(item.minrecharge * usdtObj.rate)) }} ~ {{
                verifyNumberComma(String(item.maxrecharge * usdtObj.rate)) }}
            </template>
            <template v-else>
              {{ verifyNumberComma(String(item.minrecharge)) }} ~ {{ verifyNumberComma(String(item.maxrecharge)) }}
            </template>
          </div>
        </div>
      </div>
      <div class="item_list_r">
        <a class="button_color" @click="chooseWay(item)"> {{ t('deposit_page_use') }} </a>
      </div>
    </div>

  </div>
</template>

<script setup lang='ts'>
import { useI18n } from "vue-i18n";
import {onMounted, onUnmounted, ref, watch} from 'vue';
import { useRouter } from 'vue-router';
// import { Net } from '@/net/Net';
import H5Websocket from "@/net/Net1";
import { NetPacket } from '@/netBase/NetPacket';
import { showToast } from '@nutui/nutui';
import { Local } from "@/utils/storage";
import { verifyNumberComma } from "@/utils/publicMethods";
import {storeToRefs} from "pinia";
import {User} from "@/store/user.ts";
import pinia from "@/store";

const { t } = useI18n();
const router = useRouter();
const { appHeight, shopInfoData } = storeToRefs(User(pinia));

const usdtRecharge = ref<any>(); // 充值银行列表
const curDepositWay = ref({ _payname: '' }); // 当前选择的充值方式
// const legalRecharge = ref<any>([]);
// const baseMtdList = { label: t('addBank_page_pChoose'), value: -1, minrecharge: 0, maxrecharge: 0, paymethod: '' }
// const baseDcList = { label: t('deposit_page_notOffer'), value: 0 }

const chooseBank = ref({ label: '', value: '' }); // 选择的银行卡
const usdtObj = ref({
  rate: 26540, // usdt 汇率,
});

// 重置
const resetData = () => {
  curDepositWay.value = { _payname: '' }
  chooseBank.value = { label: '', value: '' }
}
// 获取充值信息
const getShopInfo = () => {
  const req = NetPacket.req_get_shop_info();
  // Net.instance.sendRequest(req);
  H5Websocket.sendMessageHandler(req);
}
const handleShopInfoRes = (rs: any) => {
  resetData();
  usdtObj.value.rate = rs.usdt_viet_rate;
  usdtRecharge.value = rs.rechargelist_by_paymenttype;
  console.log('-------', usdtRecharge.value)
  Local.set('depositWayObj', { legalRecharge: rs.rechargelist_by_paymenttype })
};

const onCloseSm = (data: any) => {
  Local.set('curExplainWay', data);
  router.push(`/deposit/explain`);
}
// 去充值
const goToDeposit = () => {
  if (!curDepositWay.value._payname) {
    return showToast.fail(t('method_error'));
  }
  router.push(`/depositNext`);
}
// 选择充值方式
const chooseWay = (data: any) => {
  Local.set('curDepositWay', data);
  // form.value.method = data.paymenttype
  curDepositWay.value = data;
  goToDeposit();
}
watch(
    () => shopInfoData.value,
    (n) => {
      handleShopInfoRes(n)
      console.log('--充值列表--', n)
    }
);

onMounted(() => {
  setTimeout(() => {
    getShopInfo();
  }, 500)
  // 获取银行信息
  // MessageEvent2.addMsgEvent(NetMsgType.msgType.msg_notify_req_get_shop_info, handleShopInfoRes);
})
onUnmounted(() => {
  // MessageEvent2.removeMsgEvent(NetMsgType.msgType.msg_notify_req_get_shop_info, null);
})

</script>

<style lang='scss' scoped>
.body {
  overflow-y: auto;
  padding: 14px 14px 30px;
  color: #fff;
  font-size: 14px;

  .item_list {
    position: relative;
    display: flex;
    justify-content: space-between;
    border-radius: 8px;
    width: 100%;
    height: 65px;
    padding: 8px 12px;
    background: #131232;
    margin-bottom: 10px;

    &.wh_item {
      pointer-events: none;
    }

    .bank_wh {
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      background: rgba(40, 39, 71, 0.8);
      width: 100%;
      height: 100%;
      border-radius: 8px;
      top: -3px;
      left: -3px;

      span {
        margin-left: 4px;
      }
    }

    .item_list_l {
      display: flex;
      align-items: center;

      .bank_icon {
        width: 48px;
        height: 48px;
        background: #282747;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        margin-right: 9px;

        img {
          width: 36px;
          height: 36px;
        }
      }

      .bank-txt {
        .bank_name {
          display: flex;
          align-items: center;
          color: #fff;

          .bank_payName {
            max-width: 160px;
            min-width: 60px;
          }

          .wh-icon {
            margin-left: 5px;
            width: 14px;
            height: 14px;
          }
        }

        .bank_limit {
          font-weight: 500;
          font-size: 12px;
          color: #FFCB46;
        }
      }
    }

    .item_list_r {
      display: flex;
      align-items: center;
      a {
        display: inline-block;
        text-align: center;
        width: 72px;
        height: 32px;
        line-height: 32px;
      }
    }

  }
}
</style>